<template>
  <div class="wrapper">
    <div class="my">
      <img src="src/assets/img/head.jpg">
      <div class="my-text">
        <text >{{user.userName}}</text>


      </div>
    </div>
  </div>

  <div class="exit">
    <el-button type="danger" >退出登录</el-button>
  </div>
  <Footer/>
</template>

<script setup>
import {getCurrentInstance, reactive,onMounted} from "vue";
import Footer from "./item/Footer.vue";
import {getSessionStorage} from "../main.js";
import {useRouter} from "vue-router";
let internalInstance = getCurrentInstance();

let message=internalInstance.appContext.config.globalProperties.$message
const router=useRouter()
let user=reactive({})

onMounted(()=>{
  const storedUser =getSessionStorage("user")

  if (storedUser !== null) {
    Object.assign(user, storedUser);
    console.log(user);

  } else {
    message.error("未登录或者登录失效");
    router.push('/login');
  }
})



</script>

<style scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 85vh;
}
.my{
  display: flex;

  background-image: url('src/assets/img/user.png');
  /* 让背景图宽度和高度都覆盖整个容器 */
  background-size: contain; /* 让背景图尽量适应容器，不拉伸变形 */
  background-repeat: no-repeat; /* 不重复显示背景图 */
  //background-position: center; /* 图片在容器中居中显示 */
  width: 100%; /* 让容器宽度充满父元素 */
}
.my img{
  width: 70px;
  height: 70px;
  padding: 20px 30px;

}
.my .my-text{
  display: flex;
  flex-direction: column;
  color: white;
  justify-content: space-around;
}

.exit{
  z-index: 1000;
  display: flex;
  justify-content: center;
  margin-top: auto; /* 把 exit 放到 wrapper 的底部 */
  margin-bottom: 20vw;
}
.exit .el-button{

  min-width: 90%;
}
</style>
